<template>
  <div id="publicity">
    <flexbox class="select_box">
      <flexbox-item class="select_father select_left">
        <select ref="img_type" class="select" id="img_type" name="img_type" @change="filtrImg">
          <option selected="" value="0">显示全部</option>
          <option value="1">代理招募</option>
          <option value="2">玩家招募</option>
          <option value="3">活动宣传</option>
        </select>
      </flexbox-item>
      <flexbox-item class="select_father">
        <select ref="img_shape" class="select" id="img_shape" name="img_shape" @change="filtrImg">
          <option selected="" value="0">横图</option>
          <option value="1">竖图</option>
        </select>
      </flexbox-item>
    </flexbox>
    <p class="dec">
      <i>宣传资源库</i>, 为广大代理提供免费使用的宣传图，代理可根据自己的喜好挑选图片分享或下载， 图库不定期更新为广大代理提供更多可用的素材。方便代理们宣传，更快速的找到合适的牌友。
    </p>
    <div ref="imgbox" class="imgbox">
      <div class="img" v-for="(item, index) in list" :key="index">
        <img class="previewer-demo-img" :src="item.img" @click="show(index)">
      </div>
    </div>
    <div class="img_btn">
      <button class="upPage" @click="getUpPage()">上一页</button>
      <select ref="pageNumber" class="pageNumber" name="page" @change="getPage()">
        <option v-if="maxPage===0" value="0">0 / 0</option>
        <option v-else v-for="i in maxPage" :key="i" :value="i">{{i}} / {{maxPage}}</option>
      </select>
      <button class="nextPage" @click="nextPage()">下一页</button>
    </div>
    <div v-transfer-dom>
      <previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
    </div>
  </div>
</template>

<script>
import { Previewer, TransferDom, Flexbox, FlexboxItem } from "vux";

export default {
  data() {
    return {
      type: 0, //图片类型
      shape: 0, // 区分横竖图
      list: [], //图片数组
      page: 1, //当前页码
      pagesize: 10, //每页显示个数默认为10
      maxPage: 1, //最大页数
      options: {
        getThumbBoundsFn(index) {
          let thumbnail = document.querySelectorAll(".previewer-demo-img")[
            index
          ];
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop;
          let rect = thumbnail.getBoundingClientRect();
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
        }
      }
    };
  },
  directives: {
    TransferDom
  },
  components: {
    Flexbox,
    FlexboxItem,
    Previewer
  },
  created() {
    this.getImgList(this.type, this.shape, this.page, this.pagesize);
  },
  methods: {
    getImgList(type, shape, page, pagesize) {
      this.apiService.publicity
        .publicityimglist({
          imgtype: type,
          shape: shape,
          currentpage: page,
          pagesize: pagesize
        })
        .then(res => {
          this.list = res.data.imglist;
          this.maxPage = Math.ceil(res.data.total / this.pagesize);
          this.page = res.data.currentpage;
        });
    },
    show(index) {
      this.$refs.previewer.show(index);
    },
    logIndexChange(arg) {},
    filtrImg() {
      this.type = this.$refs.img_type.value;
      this.shape = this.$refs.img_shape.value;
      //通过横竖图类型来添加类（用于控制图片的样式）
      if (this.shape == 1) this.$refs.imgbox.classList.add("vertical");
      else this.$refs.imgbox.classList.remove("vertical");
      //切换图片类型的时候默认显示第一页数据
      this.page = 1;
      //发送ajax请求吧
      this.getImgList(this.type, this.shape, this.page, this.pagesize);
    },
    //上一页
    getUpPage() {
      if (this.page === 1) this.page = 1;
      else {
        this.page--;
        this.getImgList(this.type, this.shape, this.page, this.pagesize);
      }
      this.$refs.pageNumber.value = this.page;
    },
    //选中页
    getPage() {
      //通过表单获取的值是字符串类型，需要转化成number类型
      this.page = Number(this.$refs.pageNumber.value);
      this.getImgList(this.type, this.shape, this.page, this.pagesize);
    },
    //下一页
    nextPage() {
      if (this.page === this.maxPage) this.page == this.maxPage;
      else {
        this.page++;
        this.getImgList(this.type, this.shape, this.page, this.pagesize);
      }
      this.$refs.pageNumber.value = this.page;
    }
  }
};
</script>
<style scoped>
#publicity {
  height: 100%;
}
#publicity .select {
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  background-color: transparent;
  width: 100%;
  font-size: inherit;
  height: 44px;
  line-height: 44px;
  position: relative;
  z-index: 1;
  padding-left: 25%;
}
#publicity .select_box,
#publicity .select_father {
  position: relative;
  background-color: #fff;
}
#publicity .select_box::after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #d9d9d9;
  color: #d9d9d9;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
#publicity .select_box .select_left::after {
  content: " ";
  position: absolute;
  right: 0;
  top: 20%;
  width: 3px;
  height: 60%;
  bottom: 0;
  border-right: 3px solid #c7c7c7;
  color: #c7c7c7;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}

#publicity .select_father::before {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #c8c8cd;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
  transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
  position: relative;
  position: absolute;
  top: 48%;
  left: 50%;
  margin-top: -4px;
}
#publicity .select_box .select_left::before {
  left: 70%;
}
.dec {
  color: rgb(85, 85, 85);
  padding: 0.2rem 0.3rem;
  font-size: 0.27rem;
  line-height: 0.35rem;
  text-align: justify;
}
.dec i {
  color: #fc6c2c;
  font-style: normal;
}
/* 图片样式 */
.imgbox {
  position: relative;
  height: 80%;
  overflow: auto;
  padding: 1% 2.5% 15%;
}
.imgbox .img {
  margin: 1.5% 0;
  height: 200px;
  overflow: hidden;
  text-align: center;
}
.imgbox img {
  max-width: 100%;
  max-height: 100%;
}
.imgbox.vertical .img {
  float: left;
  width: 45%;
  margin: 2%;
}

/*页码*/
.img_btn {
  position: fixed;
  bottom: 0;
  padding: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.img_btn button,
.img_btn select {
  line-height: 0.6rem;
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 0 0.4rem;
  margin: 0 0.2rem;
}
.img_btn button,
.img_btn select span {
  color: rgb(125, 191, 250);
}
</style>